<template>
	<div class="bigbox">
		<div class="headerimg">
			<img src="http://img.wawachina.cn/xcx/images/qu_banner_2.jpg" alt="">
		</div>
		<div class="tapbox">
			<div 
			v-for="item in tap" :key="item.id"  
			:class="tapIndex==item.id?'active':''" 
			@click="itemIndex(item.id)"
			>{{item.name}}</div>
		</div>
		<div class="tapcon">
			<div 
			v-for="(item,index) in newqsa" :key="item.id"
			@click="mp3box(item)"
			:class="defQAIndex===item.id?'act':''"
			>{{index+1}}.{{item.question}}
			</div>
		</div>
		<div class="bgnull"></div>
		<div class="mp3box">
			<div class="mp3title"><div>{{defQA.question}}</div> <div>分享</div> </div>
			<div class="mp3con">
				<div class="mp3combox">
					<div class="box">
						<div class="wifi-symbol">
							<div class="wifi-circle first"></div>
							<div class="wifi-circle second"></div>
							<div class="wifi-circle third"></div>
						</div>
					</div>
					 <audio id='audio' :src="defQA.fullAnswer" preload="auto" @click="playmp3" >专家解答</audio> </div>
				<div class="defQAcount">{{defQA.count}}人听过</div>
			</div>
		</div>
		<div class="bgnull"></div>
		
		
	</div>
</template>

<script>
import { GetQuestion } from "@/service";
	export default {
		data() {
			return {
				title: 'question',
				tap:[],
				tapIndex:1,
				qas:[],
				newqsa:[],
				defQA:{},
				defQAIndex:null,
				mp3flag:false
			}
		},
		onLoad() {

		},
        async onShow(){
            var result = await GetQuestion();
            console.log(result);
			this.tap = result.categorys
			this.qas = result.qas
			this.newqsa = result.qas.filter(item=>item.category==this.tapIndex)  //渲染列表
			this.defQA = result.defQA
        },
		methods: {
			itemIndex(id){
				this.tapIndex = id
				let arr = this.qas.filter(item=>item.category==this.tapIndex) //渲染列表
				this.newqsa = arr
			},
			mp3box(item){
				// console.log(item);
				this.defQA = item
				this.defQAIndex = item.id
			},
			playmp3(){
				console.log('播放语音');
				let audio=wx.createAudioContext("audio")
				
				if(this.mp3flag == false){
					audio.play()
					this.mp3flag = true;
				}else{
					audio.pause()
					this.mp3flag = false;
				}
				// .play()
			}
		}
	}
</script>

<style lang="scss" scoped>
.bigbox{
	width: 100%;
	height: 100%;
	.headerimg{
		width: 100%;
		height: 200rpx;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.tapbox{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		border-bottom: rgb(222, 224, 224) 1rpx solid;
		align-items: center;
		font-size: 14px;
		.active{
			height: 99.9%;
			line-height: 100rpx;
			border-bottom: 4rpx solid #ff5d43;
			color: #ff5d43;
		}
	}
	.tapcon{
		width: 100%;
		div{
			width: 100%;
			height: 68rpx;
			border-top: 1px solid rgb(222, 224, 224);
			line-height: 68rpx;
			padding-left: 20rpx;
			font-size: 12px;
			color: rgb(88, 87, 87);
		}
		.act{
			color: #ff5d43;
		}
	}
	.bgnull{
			height: 20rpx;
			background: rgb(251, 251, 251);
		}
	.mp3box{
		width: 100%;
		// >div{
		// 	border-bottom: 1px solid rgb(222, 224, 224);
		// }
		.mp3title{
			width: 100%;
			color: #ff5d43;
			font-size: 14px;
			height: 70rpx;
			align-items: center;
			display: flex;
			border-bottom: 1px solid rgb(222, 224, 224);
			>div{
				margin-left: 20rpx;
			}
			>div:nth-child(2){
				position: absolute;
				right: 20rpx;
				border: #ff5d43 1rpx solid;
				padding: 5rpx 20rpx;
				border-radius: 10rpx;
			}
		}
		.mp3con{
			padding-left: 20rpx;
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			.mp3combox{
				width: 300rpx;
				height: 60rpx;
				border: #ff5d43 1rpx solid;
				border-radius: 20rpx 20rpx 20rpx 0rpx;
				background: #ffebeb;
				display: flex;
				align-items: center;
			}
			.defQAcount{
				position: absolute;
				right: 10rpx;
				font-size: 12px;
				color: #ff5d43;
			}
		}
	}
}




		*{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 30px;
            height: 30px;
			// background: red;
            box-sizing: border-box;
            position: relative;
            margin-left:25rpx;
        }
        .wifi-symbol {
            width: 30px;
            height: 30px;
			// background: rgb(66, 189, 178);
            box-sizing: border-box;
            overflow: hidden;
            transform: rotate(135deg);
 
        }
        .wifi-circle {
            border: 3px solid #999999;
            border-radius: 50%;
            position: absolute;
        }
 
        .first {
            width: 15px;
			height: 15px;
			background: #cccccc;
			top: 24px;
			left: 24px;
        }
 
        .second {
			width: 30px;
			height: 30px;
			top: 16px;
			left: 16px;
            animation: fadeInOut 1s infinite 0.2s;
        }
 
        .third {
			width: 50px;
			height: 50px;
			top: 7px;
			left: 7px;
            animation: fadeInOut 1s infinite 0.4s;
        }
 
        @keyframes fadeInOut {
            0% {
                opacity: 0; /*初始状态 透明度为0*/
            }
            100% {
                opacity: 1; /*结尾状态 透明度为1*/
            }
        }
</style>
